<template>
  <div class="config-token">
    <el-card>
      <template #header>
        <div class="card-header">
          <h3>Token配置</h3>
        </div>
      </template>

      <el-form :model="configForm" label-width="120px" label-position="left">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="Token签发组织">
              <el-input v-model="configForm.iss" placeholder="请输入签发组织" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="Token签发作者">
              <el-input v-model="configForm.aud" placeholder="请输入签发作者" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="Token Secret">
              <el-input v-model="configForm.secrect" placeholder="请输入secrect" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="Token过期时间">
              <el-input v-model="configForm.exptime" placeholder="请输入过期时间" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item>
          <el-button type="primary" @click="submitForm">立即提交</el-button>
          <el-button @click="testLogin">Api测试登录</el-button>
          <el-button @click="testToken">Token测试</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>

      <div style="padding: 30px 0">
        <p class="red">先点击登录，在点击测试，会有好的结果哦！</p>
        <p>测试结果：</p>
        <div id="res" v-html="testResult"></div>
      </div>
    </el-card>

    <!-- API测试登录对话框 -->
    <el-dialog v-model="loginDialogVisible" title="API测试用户登录" width="432px">
      <el-form :model="loginForm" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="loginForm.username" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="loginForm.password" type="password" show-password />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="loginDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleTestLogin">登录</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, onMounted } from 'vue'
  import { ElMessage } from 'element-plus'
  import axios from '@/utils/request'

  // 表单数据
  const configForm = reactive({
    id: 0,
    iss: '',
    aud: '',
    secrect: '',
    exptime: '',
  })

  // 登录测试相关
  const loginDialogVisible = ref(false)
  const loginForm = reactive({
    username: 'admin',
    password: '123456',
  })

  // 测试结果
  const testResult = ref('')
  const testTokenValue = ref('')

  // 获取Token配置
  const getTokenConfig = async () => {
    try {
      const response = await axios.get('/home/conf/token')

      if (response.data?.code === 0) {
        Object.assign(configForm, response.data.data)
      } else {
        ElMessage.error(response.data?.msg || '获取Token配置失败')
      }
    } catch (error) {
      ElMessage.error('获取Token配置失败')
    }
  }

  // 提交表单
  const submitForm = async () => {
    try {
      const response = await axios.post('/home/conf/edit', configForm)

      if (response.data?.code === 0) {
        ElMessage.success('保存成功')
      } else {
        ElMessage.error(response.data?.msg || '保存失败')
      }
    } catch (error) {
      ElMessage.error('保存失败')
    }
  }

  // Api测试登录
  const testLogin = () => {
    loginForm.username = 'admin'
    loginForm.password = '123456'
    loginDialogVisible.value = true
  }

  // 处理测试登录
  const handleTestLogin = async () => {
    try {
      const response = await axios.post('/auth/login', {
        username: loginForm.username,
        password: loginForm.password,
      })

      if (response.data?.code === 0) {
        testTokenValue.value = response.data.data.token
        ElMessage.success('登录成功')
        loginDialogVisible.value = false
      } else {
        ElMessage.error(response.data?.msg || '登录失败')
      }
    } catch (error) {
      ElMessage.error('登录失败')
    }
  }

  // Token测试
  const testToken = async () => {
    if (!testTokenValue.value) {
      ElMessage.warning('请先进行API测试登录')
      return
    }

    try {
      const response = await axios.get('/demo/test', {
        headers: {
          Token: testTokenValue.value,
        },
      })

      testResult.value = JSON.stringify(response, null, 2).replace(/\n/g, '<br>')

      if (response.data.code === 111) {
        ElMessage.warning(response.data.msg)
      }
    } catch (error) {
      testResult.value = '测试失败: ' + (error as Error).message
    }
  }

  // 重置表单
  const resetForm = () => {
    getTokenConfig()
  }

  // 初始化
  onMounted(() => {
    getTokenConfig()
  })
</script>

<style scoped>
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .red {
    color: #f56c6c;
  }
</style>
